<template>
    <div id='VehicleInfo' style="margin-top:1px;">
        <!--搜索-->
        <div class="row" style="padding:5px;">
            <Row type="flex">
                <div class="row" style="width:100%; padding-left:20px;">
                    <div class="col-lg-12">
                            <div class="col-sm-6 col-lg-3" style="padding:5px;">
                                <label for="VLPN" style=" color:#FFF">车牌号：</label>
                                <!--<i-switch size="large" style="border-radius:24px;">
                                    <span slot="open">包含</span>
                                    <span slot="close">等于</span>
                                </i-switch>-->
                                <Input  name='VLPN' placeholder="输入车牌号" style="width: 70%;" class="put"></Input>
                            </div> 
                            <div class="col-sm-6 col-lg-3" style="padding:5px;">
                                <label for="VIN" style=" color:#FFF">车辆属地：</label>
                                <!--<i-switch size="large">
                                    <span slot="open">包含</span>
                                    <span slot="close">等于</span>
                                </i-switch>--> 
                                <Select v-model="model1" style="width:70%;">
                                    <Option v-for="item in CarFor" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                            </div>
                            <div class="col-sm-6 col-lg-3" style="padding:5px;">
                                <label for="VIN" style=" color:#FFF">审核类型：</label>
                                <!--<i-switch size="large">
                                    <span slot="open">包含</span>
                                    <span slot="close">等于</span>
                                </i-switch>--> 
                                <Select v-model="model1" style="width:70%;">
                                    <Option v-for="item in Cartype" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                            </div>
                            <div class="col-sm-6 col-lg-3" style="padding:5px;">
                                <label for="VIN" style=" color:#FFF">审核状态：</label>
                                <!--<i-switch size="large">
                                    <span slot="open">包含</span>
                                    <span slot="close">等于</span>
                                </i-switch>--> 
                                <Select v-model="model1" style="width:70%;">
                                    <Option v-for="item in Carstate" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                            </div>
                            <div class="col-sm-6 col-lg-3" style="padding:5px;">
                                <label for="VIN" style=" color:#FFF">审核结果：</label>
                                <!--<i-switch size="large">
                                    <span slot="open">包含</span>
                                    <span slot="close">等于</span>
                                </i-switch>--> 
                                <Select v-model="model1" style="width:70%;">
                                    <Option v-for="item in CarResult" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                            </div>
                             <div class="col-sm-6 col-lg-3" style="padding:5px;">
                                <label for="VIN" style=" color:#FFF">监测点位：</label>
                                <!--<i-switch size="large">
                                    <span slot="open">包含</span>
                                    <span slot="close">等于</span>
                                </i-switch>--> 
                                <Select v-model="model1" style="width:70%;">
                                    <Option v-for="item in CarResult" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                            </div>
                            <div class="col-sm-6 col-lg-3" style="padding:5px;">
                                <label for="VIN" style=" color:#FFF">林格曼等级（参考）:</label>
                                <!--<i-switch size="large">
                                    <span slot="open">包含</span>
                                    <span slot="close">等于</span>
                                </i-switch>--> 
                                <Select v-model="model1" style="width:57%;">
                                    <Option v-for="item in Ringelman" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                            </div>
                            <div class="col-sm-12 col-lg-4" style="padding:5px;">
                                <label for="VIN" style=" color:#FFF">抓拍时间:</label>
                                <!--<i-switch size="large">
                                    <span slot="open">包含</span>
                                    <span slot="close">等于</span>
                                </i-switch>--> 
                                 <Date-picker type="date" :options="options1" placeholder="选择日期" style="width: 200px"></Date-picker>
                                 <Date-picker type="date" :options="options1" placeholder="选择日期" style="width: 200px"></Date-picker>
                            </div>
                            <div class="col-sm-6 col-lg-3" style="padding:5px;">
                                <Button type="primary" class="btn-alt" shape="circle" @click='search'>检索</Button>
                                <Button type="primary" class="btn-alt" shape="circle" @click='show()'>导出</Button> 
                            </div>
                    </div> 
                </div>
            </Row>
     
        </div>
    
        <!--表格-->
        <div class="row" style="padding:10px;">
            <div class="col-lg-12" style=" border-top:1px solid rgba(255,255,255,0.35); padding-top:10px;">
                <Checkbox-group v-model="tableColumnsChecked" @on-change="changeTableColumns">
                    <Checkbox label="show">缩略图</Checkbox>
                    <Checkbox label="weak">车牌号</Checkbox>
                    <Checkbox label="signin">车牌颜色</Checkbox>
                    <Checkbox label="click">监测点位</Checkbox>
                    <Checkbox label="active">抓拍时间</Checkbox>
                    <Checkbox label="show">林格曼等级（参考）</Checkbox>
                    <Checkbox label="weak">车辆属地</Checkbox>
                    <Checkbox label="signin">初审状态</Checkbox>
                    <Checkbox label="click">审核结果</Checkbox>
                    <Checkbox label="active">抓拍次数</Checkbox> 
                    <Checkbox label="active">抓拍次数</Checkbox>
                </Checkbox-group>
                <v-table :columns="columns" :data="data" style="text-transform: uppercase; font-weight: normal;overflow-x: auto;"></v-table>
                <div style="margin: 10px;overflow: hidden">
                    <div style="float: right;">
                        <Page :total="100" :current="1" @on-change="changePage"></Page>
                    </div>
                </div>
            </div>
        </div>
    
        <!--弹窗-->
        <Modal v-model="showModal" width="850">
            <p slot="header" style="color:#f60;text-align:center">
                <span style="font-size:18px;">车辆信息编辑</span>
            </p>
    
            <div style="text-align:center">
                <vehicle-form :vecId="VehicleID" ref="vehicleForm"></vehicle-form>
            </div>
    
            <div slot="footer">
                <div class="col-lg-6">
                    <Button type="error" size="large" long @click="showModal=false">取消</Button>
                </div>
                <div class="col-lg-6">
                    <Button type="error" size="large" long @click="dispatch">提交</Button>
                </div>
               <div style="clear:both"></div>
            </div>
            
        </Modal>
    </div>
</template>
 
 

<script>
import VTable from '@/components/business/VTable'
import VehicleForm from '@/modules/Vehicle/VehicleInfo/VehicleForm'
import vm from '@/utils/Form.js'
import qs from 'qs'

const API_TYPE = {
    SEARCH: "/businesscom/common/DataPageQuery",
    DELETE: "/vehicle/Vehicle/UpdateVehicleIsInValid",
    EDIT: "/vehicle/Vehicle/AdminSaveVehicle"
}

let queryParams = {
    table: "Vehicle",
    flds: [{ fld: "VehicleID" }, { fld: "VLPN" }, { fld: "VLPNColor" }, { fld: "VRDATE" }, { fld: "FactoryPlateModel" }
    ],
    priCodeFieldName: null,
    conditions: null
};


function SearchCondition() {
    var self = this;
    self.VIN = new vm.Field("VIN", "varchar", 50, "车架号");
    self.VIN.op = "like";
    self.VLPN = new vm.Field("VLPN", "varchar", 50, "号牌号码");
    self.VLPN.op = "like";
    self.IsInValid = new vm.Field("IsInValid", "int", "8", "是否无效");
    self.IsInValid.op="=";
    self.IsInValid.value="0";
}

export default {
    data() {
        return {
            vecModel: {},
            sc: new SearchCondition(),
            VehicleID: '',
            isNew: null,
            tableColumnsChecked: ['show', 'weak', 'signin', 'click', 'active'],
            data: [ 
                {
                    VehicleID: 'test1',
                    VLPN: 'test',
                    VLPNColor: 'test',
                    VRDATE: "2016-09-10 11:04:06",
                    FactoryPlateModel: 'test'
                },
                {
                    VehicleID: 'test',
                    VLPN: 'test',
                    VLPNColor: 'test',
                    VRDATE: "2017-07-10 11:04:06",
                    FactoryPlateModel: 'test'
                }
            ],
            Carstate: [
                    {
                        value: '0',
                        label: '全部'
                    },
                    {
                        value: '1',
                        label: '未审核'
                    },
                    {
                        value: '2',
                        label: '已审核'
                    }
                ],
            Cartype: [
                    {
                        value: '1',
                        label: '全部'
                    },
                    {
                        value: '2',
                        label: '自动审核'
                    },
                    {
                        value: '3',
                        label: '人工审核'
                    } 
                    
                ],
            CarFor: [
                    {
                        value: '1',
                        label: '全部'
                    },
                    {
                        value: '2',
                        label: '非本市车辆'
                    },
                    {
                        value: '3',
                        label: '本市车辆'
                    }
                ],
            CarResult: [
                    {
                        value: '1',
                        label: '全部'
                    },
                    {
                        value: '2',
                        label: '未审核'
                    },
                    {
                        value: '3',
                        label: '已审核为黑烟车'
                    },
                    {
                        value: '4',
                        label: '已审核为非黑烟车'
                    }
                ],
            Ringelman: [
                    {
                        value: '1',
                        label: '全部'
                    },
                    {
                        value: '2',
                        label: '零级'
                    },
                    {
                        value: '3',
                        label: '一级'
                    },
                    {
                        value: '4',
                        label: '二级'
                    },
                    {
                        value: '5',
                        label: '三级'
                    },
                    {
                        value: '6',
                        label: '四级'
                    },
                    {
                        value: '7',
                        label: '五级'
                    }
                ],
                options1: {
                    shortcuts: [
                        {
                            text: '今天',
                            value () {
                                return new Date();
                            },
                            onClick: (picker) => {
                                this.$Message.info('点击了今天');
                            }
                        },
                        {
                            text: '昨天',
                            value () {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                return date;
                            },
                            onClick: (picker) => {
                                this.$Message.info('点击了昨天');
                            }
                        },
                        {
                            text: '一周前',
                            value () {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                return date;
                            },
                            onClick: (picker) => {
                                this.$Message.info('点击了一周前');
                            }
                        }
                    ]
                },
            queryParams: queryParams,
            showModal: false,
            columns: [
                { title: '缩略图', key: 'VehicleID' },
                { title: '车牌号', key: 'VLPN' },
                { title: '车牌颜色', key: 'VLPNColor' },
                { title: '监测点位', key: 'VRDATE' },
                { title: '抓拍时间', key: 'FactoryPlateModel' },
                { title: '林格曼等级（参考）', key: 'VehicleID' },
                { title: '车辆属地', key: 'VLPN' },
                { title: '初审状态', key: 'VLPNColor' },
                { title: '审核结果', key: 'VRDATE' },
                { title: '抓拍次数', key: 'FactoryPlateModel' }, 
                {
                    title: '初审',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                    icon:'play',
                                    shape:"circle"
                                },
                                style: {
                                    width:'40px',
                                    height:'40px',
                                    marginRight: '10px'
                                },
                                on: {
                                    click: () => {
                                        /*弹窗方法*/
                                        this.show(params.row.VehicleID);
                                    }
                                }
                            }, ) 
                        ]);
                    }
                }
            ]

        }
    },
    components: {
        VTable,
        VehicleForm
    },
    methods: {
        search() {
            let con = vm.buildConditions(this.$data.sc);
            this.queryParams.conditions = con;

            let params = {
                data: JSON.stringify(this.$data.queryParams),
                rows: '20',   //每页多少行
                page: '1',    //第几页
                sort: 'VehicleID',
                order: 'desc'
            }
            params = qs.stringify(params);
            this.$axios.post("/businesscom/common/DataPageQuery", params, {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            }).then((res) => {
                this.data = res.data.rows;

            }).catch((err) => {
                console.log(err);
            })
        },
        /*弹窗方法*/
        show(ID) {
            this.VehicleID = ID ? ID : null;
            this.isNew = ID ? false : true;
            this.showModal = !this.showModal;
            // this.$data.vehicle.VLPN.value=row.VLPN;
            // this.$data.vehicle.VLPNColor.value=row.VLPNColor;
            // this.$data.vehicle.VRDATE.value=row.VRDATE;
            // this.$data.vehicle.FactoryPlateModel.value=row.FactoryPlateModel;

        },
        /*Table删除按钮方法*/
        showDel(row) {
            let vlpn = row.VLPN;
            let id = row.VehicleID;
            let content = '<p>是否确定永久作废[' + vlpn + ']?';
            this.$Modal.confirm({
                title: '提醒',
                content: content,
                onOk: () => {
                    // this.$data.isDel=true;     
                    this.remove(id);
                }
            });
        },
        /*删除方法*/
        remove(id) {
            let params = {
                vehicleID: id,
                IsInValid: 1,
                IsInValidName: '是'
            }
            params = qs.stringify(params);
            this.$axios.get("/vehicle/Vehicle/UpdateVehicleIsInValid?" + params).then((res) => {
                this.search();
                this.$Message.success('删除成功');

            }).catch((err) => {
                this.$Message.error('删除失败');
            })

        },
        dispatch() {
            this.$data.vecModel = this.$refs.vehicleForm.vec;
            if (this.$data.isNew) {
                console.log('新增操作');
            } else {
                this.edit();
            }
        }, 
        /*分页方法*/
        changePage () {
                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
                this.tableData1 = this.mockTableData1();
        },
        /*修改方法*/
        edit() {
            let params = {
                data: JSON.stringify(vm.buildEntityFromTable(this.$data.vecModel))
            };
            params = qs.stringify(params);
            this.$axios.post("/vehicle/Vehicle/AdminSaveVehicle", params, {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            }).then((res) => {
                if (res.data.VehicleID) {
                    this.$Message.success('保存成功');
                } else {
                    this.$Message.error('保存失败');
                }
            }).catch((err) => {
                this.$Message.error('保存失败:' + err);
            })
        }
    }
}

</script>